<template>
	<div>
		<div style="width:100%;height: 500px;" class="biao1"></div>
		<div style="text-align: center;">
			<el-table :data="tableData" style="width: 100%;">
				<el-table-column fixed prop="Irank" label="排名" width="100">
				</el-table-column>
				<el-table-column prop="CinemaName" label="影院名称" width="180">
				</el-table-column>
				<el-table-column prop="CinemaLineName" label="所属院线" width="140">
				</el-table-column>
				<el-table-column prop="Company" label="所属影投" width="120">
				</el-table-column>
				<el-table-column prop="ProvinceName" label="省份" width="120">
				</el-table-column>
				<el-table-column prop="CityName" label="城市" width="120">
				</el-table-column>
				<el-table-column prop="ZZID" label="专资编码" width="120">
				</el-table-column>
				<el-table-column prop="ScreenCount" label="银幕数" width="120">
				</el-table-column>
				<el-table-column prop="ScreenCount" label="银幕数" width="120">
				</el-table-column>
			</el-table>
		</div>
		<div class="block" style="margin-left: 150px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="currentPage1" :page-size="1" layout="total, prev, pager, next" :total="9939">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		GetYypp
	} from "@/api/yypp.js"
	export default {
		data() {
			return {
				pageindex: 1,
				tableData: [],
				currentPage1: 1,
				currentPage2: 5,
				currentPage3: 5,
				currentPage4: 4
			};
		},
		mounted() {

		},
		methods: {
			// 可视化图表
			initCharts() {
				let myChart = this.$echarts.init(document.querySelector(".biao1"));
				myChart.setOption({
					title: {
						text: '拍片分布（场次）'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						// data: ['乐达影视坞城乐丰店：39', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['新神榜:杨戬', '独行月球', '明日战记', '人生大事', '神探大战', '致命记忆之花开双', '狙击手']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '乐达影视坞城乐丰店',
							type: 'line',
							stack: 'Total',
							data: [12, 13, 11, 14, 9, 23, 10]
						},
						{
							name: '乐达影城枣庄市中店',
							type: 'line',
							stack: 'Total',
							data: [20, 18, 19, 24, 20, 33, 10]
						},
						{
							name: '鹤壁银兴国际影城',
							type: 'line',
							stack: 'Total',
							data: [10, 22, 20, 15, 19, 30, 40]
						},
						{
							name: '聊城世纪电影城',
							type: 'line',
							stack: 'Total',
							data: [30, 33, 10, 34, 90, 30, 20]
						},
						{
							name: '梦工坊龙岩美食城影城',
							type: 'line',
							stack: 'Total',
							data: [20, 32, 91, 94, 90, 30, 20]
						}
					]
				})
			},
			handleSizeChange() {
				// console.log(`每页 ${val} 条`);
				GetYypp({
					r: 0.18692348298114858,
					rowpiecetype: 1,
					datetype: "Day",
					date: "2022-08-18",
					sdate: "2022-08-18",
					edate: "2022-08-18",
					standard: '',
					showtype: '',
					citylevel: '',
					lineid: '',
					cinemaid: '',
					pageindex: this.pageindex--,
					pagesize: 10,
				}).then(res => {
					// console.log(res.data.data);
					// console.log(this.tableData[0].name);
					this.tableData = res.data.data.table1;
				})
			},
			handleCurrentChange() {
				// console.log(`当前页: ${val}`);
				GetYypp({
					r: 0.18692348298114858,
					rowpiecetype: 1,
					datetype: "Day",
					date: "2022-08-18",
					sdate: "2022-08-18",
					edate: "2022-08-18",
					standard: '',
					showtype: '',
					citylevel: '',
					lineid: '',
					cinemaid: '',
					pageindex: this.pageindex++,
					pagesize: 10,
				}).then(res => {
					// console.log(res.data.data.table1);
					// console.log(this.tableData[0].name);
					this.tableData = res.data.data.table1;
				})
			}
		},
		created() {
			GetYypp({
				r: 0.18692348298114858,
				rowpiecetype: 1,
				datetype: "Day",
				date: "2022-08-18",
				sdate: "2022-08-18",
				edate: "2022-08-18",
				standard: '',
				showtype: '',
				citylevel: '',
				lineid: '',
				cinemaid: '',
				pageindex: this.pageindex,
				pagesize: 10,
			}).then(res => {
				console.log(res.data.data);
				// console.log(this.tableData[0].name);
				this.tableData = res.data.data.table1;
				this.initCharts()
			})
		}
	};
</script>

<style>
</style>
